<template>
  <dv-border-box-7
    key="PlaNoticeData"
    class="PlaNoticeData"
    :color="['transparent']"
    backgroundColor="rgba(1,32,78,.8)"
  >
    <div class="PlaNoticeData">
      <div class="PlaNoticeData-head">
        <div class="title-sys">
          <span>重点项目播报</span>
        </div>
      </div>
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide  v-for="(item, index) in swiperData" :key="index">
          <div class="line"></div>
          <div class="item" @mouseenter="over($event, item)" @mouseleave="leave">
            <img src="../assets/img8.png" alt="" />
            <span>{{ item.project_name }}</span>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </dv-border-box-7>
</template>

<script>
import { topProjectList } from "../request/api";
//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;
export default {
  name: "PlaNoticeData",
  data() {
    return {
      swiperData: [],
      swiperOptions: {
        direction: "vertical",
        slidesPerView: "7",
        loop: false,
        preventLinksPropagation: false, // 阻止点击事件冒泡
        autoplay:{
          auto:true
        }
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 换算方法
    nowSize(val,initWidth=1920){
      return val * (nowClientWidth/initWidth);
    },
    handleSwiperEnter(){

      console.log('swiper进入')
    },
    handleSwiperLeave(){
      this.swiper.autoplay.start();
    },
    getData() {
      topProjectList().then((res) => {
        if (this.swiperData.toString() !== res.data.data.toString()) {
          this.swiperData = [...res.data.data, ...res.data.data];
        }
        if (res.data.data.length <= 5) {
          this.swiperOptions.loop = false;
        }
        this.timer = setTimeout(() => {
          this.getData();
          clearTimeout(this.timer);
        }, 10000);
      });
    },
    over(e, item) {
      let div = document.createElement("div");
      div.className = "systip";
      div.style.bottom = document.body.scrollHeight-e.currentTarget.getBoundingClientRect().top+10 + "px";
      div.style.left = e.currentTarget.getBoundingClientRect().left + "px";
      div.innerHTML = `<div style="font-size: ${this.nowSize(14)}px">${item.project_name}</div>
<div class='citynum' style="font-size: ${this.nowSize(13)}px">${item.province} · ${item.msg_num}浏览量</div>`;
      document.body.appendChild(div);
      this.swiper.autoplay.stop()
    },
    leave() {
      document.body.removeChild(document.getElementsByClassName('systip')[0])
      this.swiper.autoplay.start()
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer); //关闭
    } //利用vue的生命周期函数
  },
};
</script>

<style scoped>
.PlaNoticeData {
  height: 54.445vh;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 100px -1px #021838;
}
.PlaNoticeData-head {
  padding-top: 2.05vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-sys {
  width: 89%;
  position: relative;
  color: #fff;
  font-size: 1.111vw;
  height: 3.09vh;
  padding-left: 0.486vw;
  z-index: inherit;
  font-weight: bold;
  background: url("../assets/img1.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}
.title-sys span {
  background-image: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1),
    rgba(155, 204, 255, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dv-border-box-7 .border-box-content {
  display: flex;
}
.swiper-container {
  flex: 1;
  width: 100%;
  margin: 1.806vw 0;
  box-sizing: border-box;
  padding: 0 .68vw;
}
.PlaNoticeData .swiper-slide {
  cursor: initial;
  width: 14.5vw;
  /*margin: 0 1.875vw 0 3.333vw;*/
  margin: 0 0 0 2.633vw;
  display: flex;
  align-items: center;
  position: relative;
}
.PlaNoticeData .swiper-slide .line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.069vw;
  background-image: linear-gradient(
    to right,
    rgba(50, 197, 255, 0.15) 0%,
    rgba(50, 197, 255, 0.15) 50%,
    transparent 50%
  );
  background-size: 0.139vw 0.139vw;
  background-repeat: repeat-x;
}

.PlaNoticeData .tip {
  position: absolute;
  transform: translate3d(0, 0, 0);
  background: rgba(30, 44, 67, 0.9);
  color: #fff;
  font-size: 0.625vw;
  z-index: 999;
  width: 12.153vw;
  padding: 0.417vw 0.556vw;
}

.PlaNoticeData .swiper-slide .item {
  cursor: pointer;
  width: 100%;
  color: #ffffff;
  font-size: 0.903vw;
  position: relative;
}
.PlaNoticeData .swiper-slide .item img {
  position: absolute;
  width: 0.903vw;
  height: 0.903vw;
  left: -1.806vw;
}
.PlaNoticeData .swiper-slide .item span {
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  width: 14.5vw;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
</style>